<template>
  <div class="comment-form" :class="{focus: this.logic.isFocus}" @click.stop>
    <div class="avatar-box"><img :src="this.$store.state.userphoto"></div>
    <div class="form-box">
      <div class="input-box">
        <div
          class="rich-input"
          :placeholder="placeholder"
          contenteditable="true"
          spellcheck="false"
          @input="changeText"
          ref="richInput"
          :class="{empty: this.logic.isNull}"
          @focus="changeFocus(true)"
          @blur="changeFocus(false)"
          @paste="paste"
          id="hello"
          @keyup.ctrl.enter="comment"
        ></div>
      </div>
      <div class="action-box">
        <div class="emoji-btn">
          <!-- 预留表情按钮 -->
        </div>
        <div class="submit">
          <span>Ctrl or ⌘ + Enter</span>
          <button class="submit-btn" @click="comment" :disabled="this.logic.isNull">评论</button>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      content: '',
      logic: {
        isNull: true,
        isFocus: false
      },
      ajaxSend: {
        content: ''
      }
    }
  },
  props: {
    placeholder: '',
    articleId: '',
    quoteId: '',
    selfId: '',
    selfIndex: ''
  },
  methods: {
    changeText () {
      // this.$emit('input',this.$refs.richInput.innerHTML)
      if (this.$refs.richInput.innerHTML !== '') {
        this.logic.isNull = false
      } else {
        this.logic.isNull = true
      }
    },
    changeFocus (bool) {
      if (!this.$store.state.loginState) {
        this.common.showLogBox(this)
        return false
      }
      if (this.logic.isNull) {
        if (bool) {
          this.logic.isFocus = bool
          setTimeout(() => {
            this.$refs.richInput.focus()
          })
        } else {
          setTimeout(() => {
            if (this.logic.isFocus) {}
            this.logic.isFocus = bool
          }, 120)
        }
      } else {
        this.logic.isFocus = true
      }
    },
    toggleFocus () {
      if (this.logic.isFocus) {
        this.changeFocus(false)
        this.$refs.richInput.innerHTML = ''
        this.changeText()
      } else {
        this.changeFocus(true)
      }
    },
    paste (e) {
      // 来自张鑫旭大神的使contenteditable只能输入纯文本的办法
      e.preventDefault()
      var text = null
      var textRange
      // eslint-disable-next-line no-unused-vars
      if (window.clipboardData && window.clipboardData.setData) { // 此处自己在&&后加了个window，不知道有没有影响，不加会报错
        // IE
        text = window.clipboardData.getData('text')
      } else {
        text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本')
      }
      if (document.body.createTextRange) {
        if (document.selection) {
          textRange = document.selection.createRange()
        } else if (window.getSelection) {
          var sel = window.getSelection()
          var range = sel.getRangeAt(0)
          // 创建临时元素，使得TextRange可以移动到正确的位置
          var tempEl = document.createElement('span')
          tempEl.innerHTML = '&#FEFF;'
          range.deleteContents()
          range.insertNode(tempEl)
          textRange = document.body.createTextRange()
          textRange.moveToElementText(tempEl)
          tempEl.parentNode.removeChild(tempEl)
        }
        textRange.text = text
        textRange.collapse(false)
        textRange.select()
      } else {
        // Chrome之类浏览器
        document.execCommand('insertText', false, text)
      }
    },
    comment () {
      if (this.logic.isNull) {
        return false
      }
      this.$ajax({
        method: 'post',
        url: '/web/php/reply.php',
        data: this.$qs.stringify({
          type: 'send_comment',
          articleId: this.articleId,
          quoteId: this.quoteId,
          content: this.$refs.richInput.innerText
        })
      }).then((result) => {
        console.log(result)
        result = result.data
        switch (result.returnCode) {
          case 10040:
            this.common.showLogBox(this)
            break
          case 10100: // 发表成功
            this.common.showRegError('评论成功', this, true)
            // 评论成功清空输入框
            this.$refs.richInput.innerHTML = ''
            this.changeText()
            if (this.selfId === this.quoteId) {
              // 传入引用id和传入自身id一样说明回复对象是一级评论，该评论需要在下一级显示
              // 不一样则说明回复对象是二级评论，该评论需要在同级显示
              this.$emit('commentSuccessTwo', {
                data: result.dataInfo,
                index: this.selfIndex
              })
            } else {
              this.$emit('commentSuccessOne', result.dataInfo)
            }
            break
          case 10101:
            this.common.showRegError(result.dataInfo, this)
            break
          case 10102:
            this.common.showRegError(result.dataInfo, this)
            break
          default:
            this.common.showRegError('参数错误', this)
        }
      })
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.comment-form
  margin .32rem 0
  padding .24rem .32rem
  background $theme-6-color
  border-radius .06rem
  display flex
  &.reply
    display none
  &.focus
    display flex
    .input-box
      .rich-input
        border-color $theme-color!important
    .action-box
      display flex
  &.reply
    margin .26rem 0 0 0
    padding .24rem
    .avatar-box
      display none
  .avatar-box
    height .8rem
    display flex
    align-items center
    img
      width 0.64rem
      height 0.64rem
      border-radius 50%
      margin-right .24rem
  .form-box
    flex 1
    .input-box
      background #fff
      .rich-input
        font-size .42rem
        padding .2rem
        font-size .26rem
        min-height 0.31rem
        color #17181a
        border-radius .06rem
        outline none
        border .02rem solid #f1f1f1
        &.empty:before
          opacity .4
          content attr(placeholder)
          pointer-events none
  .action-box
    display none
    align-items center
    margin-top .16rem
    color $theme-4-color
    .submit
      margin-left auto
      span
        margin-right .16rem
        font-size .26rem
      .submit-btn
        padding .12rem .32rem
        color $theme-background
        background $theme-color
        border-radius .06rem
        cursor pointer
        font-size .3rem
        &:disabled
          cursor default
          opacity .4
@media (max-width 600px)
  .comment-form
    .avatar-box
      display none
</style>
